<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login {
            width: 12rem;
            height: 5rem;
            border-radius: 5rem;
            outline: none;
            border: none;
            background: #000;
            color: #fff;
            font-size: 1.5rem;
            font-weight: bold;
            transition: .5s;
            box-shadow: 0 8px 28px #000;
            cursor: pointer;
            position: relative;
        }

        .active {
            width: 5rem;
            color: transparent;
            position: relative;
        }

        .active .loading {
            opacity: 1;
        }

        .loading {
            width: 70%;
            height: 30%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            opacity: 0;
            transition: .5s;
        }

        .loading div {
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 50%;
            background: #fff;
            animation: loading .8s infinite ease-in-out alternate;
        }

        @keyframes loading {
            to {
                transform: translateY(-1rem);
            }
        }

        .loading div:nth-child(2) {
            animation-delay: .2s;
        }

        .loading div:nth-child(3) {
            animation-delay: .4s;
        }

        .checkmark {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            stroke-dasharray: 36px;
            stroke-dashoffset: 36px;
        }

        .active.verity .checkmark {
            animation: show .6s .4s forwards;
        }

        .verity .loading {
            transition: .4s;
            opacity: 0;
        }

        @keyframes show {
            to {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body>
    <button class="login">
        <p>LOGIN</p>
        <div class="loading">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <svg class="checkmark" width="28px" height="18px" stroke="white" fill="none">
            <polyline points="2,10 12,18 28,2"></polyline>
        </svg>
    </button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('.login').click(
        function () {
            $(this).toggleClass('active');
            setTimeout(
                () => {
                    $(this).toggleClass('verity');
                }, 3000
            )
        }
    )
</script>

</html>